<template>
  <div class="detail" :class="{'height':!length}">
    <div v-if="length">
      <div class="top">
        <van-dropdown-menu>
          <van-dropdown-item v-model="downval" :options="option1" @change="onChange"/>
        </van-dropdown-menu>
      </div>
      <div class="bottom">
        <div class="list" v-for="item in listData" :key="item.id">
          <div class="listtop">
            <img src="../assets/img/money.jpg" alt="">
            <div class="content">
              <div class="trading">
                <span style="font-size:16px;line-height:36px;">{{item.operation_type == 'bj' ? '本金提现明细':item.operation_type == 'yj'? '我的金库明细' : item.operation_type == 'ty_yj'? '佣金提现明细': item.operation_type == 'b_yj' ? '师傅佣金明细' : item.operation_type == 'tb_yj'? '师傅佣金提现明细':'佣金提现'}}</span>
                <span style="font-size:18px;padding:0 10px;" :class="{ 'orange': item.operation_type == 'yj' || item.operation_type == 'b_yj'}">{{item.operation_type == 'yj' || item.operation_type == 'b_yj' ? '+' : '-'}}{{item.change}}</span>
              </div>
              <span style="color:#999;">交易单号：{{item.transaction_number}}</span>
            </div>
          </div>
          <p>提现时间：{{item.create_time}}</p>
        </div>
      </div>
      <van-pagination v-model="page" :page-count="total" mode="simple" @change="pageChange"/>
    </div>
    <div class="nodata" v-else>
      <img src="../assets/img/nodata.png" alt="">
      <span class="textcontent">暂无明细哦~</span>
    </div>
  </div>
</template>
<script>
import { assetbreakdown } from '../api/api'
import aestool from '@/utils/aestool.js'
export default {
  data(){
    return{
      downval: 'All',
      option1: [
        { text: '全部', value: 'All' },
        { text: '本金提现明细', value: 'bj' },
        { text: '我的金库明细', value: 'yj' },
        { text: '佣金提现明细', value: 'ty_yj' },
        { text: '师傅佣金明细', value: 'b_yj' },
        { text: '师傅佣金提现明细', value: 'tb_yj' },
      ],
      listData:[],
      page:1,
      total:0,
      length:false
    }
  },
  created(){
    this.getListData()
  },
  methods:{
    getListData(){
      console.log('this.downval',this.downval)
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        parameter:aestool.encrypt(this.downval,'Assetbreakdowne0'),
        page:this.page,
        page_size:10
      }
      this.listData = []
      assetbreakdown(params).then(res=>{
        toastload.clear()
        if(res.Status == 200){
          this.total = Math.ceil(res.Count/10)
          let temp = JSON.parse(aestool.decrypt(res.Data,'Assetbreakdowne0'))
          if(temp.length>0){
            this.length = true
          }
          let ipos
          temp.forEach(item => {
            ipos = item.create_time.indexOf("+")
            item.create_time = item.create_time.replace(/T/g," ").substring(0,ipos)
            item.change = this.getFloatStr(item.change)
            this.listData.push(item)
          })
          // console.log('列表',this.listData)
        }else{

        }
      })
    },
    getFloatStr(num){
      num += '';
      num = num.replace(/[^0-9|\.]/g, ''); //清除字符串中的非数字非.字符
      if(/^0+/) //清除字符串开头的0
        num = num.replace(/^0+/, '');
      if(!/\./.test(num)) //为整数字符串在末尾添加.00
        num += '.00';
      if(/^\./.test(num)) //字符以.开头时,在开头添加0
        num = '0' + num;
      num += '00';        //在字符串末尾补零
      num = num.match(/\d+\.\d{2}/)[0];
      return num
    },
//筛选值变化
    onChange(val){
      this.downval = val
      this.getListData()
    },
    pageChange(val){
      this.page = val
      this.getListData()
    }
  }
}
</script>
<style lang="stylus" scoped>
.height{
  height 100%
}
.detail{
  background #f8f8f8
  font-size 12px
  .top{
    width 100%
    position fixed
    top 0
  }
  .bottom{
    padding-top 60px
    margin-bottom 10px
  }
  .list{
    padding 5px 16px
    background #fff
    margin-bottom 10px
    .listtop{
      display flex
      align-items center
      border-bottom 1px solid #f6f3f7
      padding 10px 0
      .content{
        display flex
        flex-direction column
        justify-content space-between
        width 90%
        .trading{
          width 100%
          display flex
          justify-content space-between
        }
        .orange{
          color orange
        }
      }
    }
    img{
      width 40px
      height 40px
      border-radius 50%
      margin-right 10px
    }
    p{
      line-height 30px
      text-align right
      color #999
    }
  }
  .nodata{
    padding-top:80px
    display flex
    flex-direction column
    justify-content center
    align-items center
    img{
      width 70%
    }
    .textcontent{
      font-size 14px
      color #969799
    }
  }
}
</style>


